<template>
  <div id="app">
    <div id="cesiumContainer"></div>
    <Nav />
    <Main-left />
    <Main-right />
    <Main-module />
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      loading: null,
      model: null,
    };
  },
  components: {
    Nav: () => import("./components/nav"),
    MainLeft: () => import("./components/mainLeft"),
    MainRight: () => import("./components/mainRight"),
    MainModule: () => import("./components/mainModule"),
  },
  mounted() {
    window.sgworld = new SmartEarth.SGWorld(
      "cesiumContainer",
      Cesium,
      {
        // url: "./static/earth.jpg",
        url: "./static/earth1.jpg",
      },
      null,
      function () {}
    );

    window.Viewer = sgworld._Viewer;
    sgworld.Navigate.Stop(); //取消飞行状态
    sgworld.Navigate.jumpTo({
      //跳转视角
      destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
    });

    var url = "http://183.162.245.49:82/xiaoxianMODEL/tileset.json";
    this.model = sgworld.Creator.create3DTilesets(
      "",
      url,
      {},
      {},
      "0",
      true,
      (data) => {
        this.flyto();
      }
    );
  },
  methods: {
    flyto() {
      if (this.model) {
        let boundingSphere = this.model.item.boundingSphere;
        Viewer.flyTo(this.model.item, {
          offset: new Cesium.HeadingPitchRange(
            0,
            -0.7,
            3 * boundingSphere.radius
          ),
        });
      }
    },
  },
};
</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}
</style>
